import React from 'react';
import { connect } from 'react-redux';
import * as routerActions from 'react-router-redux';
import { Form, Select, message } from 'antd';
import Api from 'Utils/api';
import CommonBg from 'Page/DispatchPage/Components/CommonBorder';
import '../index.scss';

const Option = Select.Option;
const FormItem = Form.Item;
class TypicalAdd extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      record: [],
    };
    this.handChange = ::this.handChange;
    this.initForm = ::this.initForm;
  }
  componentDidMount() {
    this.initForm();
  }
  initForm() {
    const api = new Api({
      method: 'GET',
      path: '/tasks',
      success: (json) => {
        this.setState({
          record: json
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  handChange(value) {
    this.props.dispatch(routerActions.push(`/system/dispatch/support/typical_case/add_next/${value}`));
  }
  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    this.completeTaskRecord = this.state.record.filter(item => item.state === true);
    return (
      <div>
        <CommonBg
          title="典型案例新增"
          content={
            <div className="typical-case-add" style={{ textAlign: 'center' }}>
              <Form className="typical-case-add-form">
                <FormItem label="指挥调度任务" >
                  {getFieldDecorator('report_target', {
                    rules: [
                      { required: true, message: '请选择指挥调度任务' }
                    ]
                  })(
                    <Select placeholder="请选择指挥调度任务" className="sel-input" onChange={this.handChange}>
                      {
                        this.completeTaskRecord.map((item) => {
                          return (<Option key={item.id} >{item.task_name}</Option >);
                        })
                      }
                    </Select>
                  )}
                </FormItem>
              </Form>
            </div>
          }
        />
      </div>
    );
  }
}
function mapStateToProps(state) {
  return {
    ...state.routing,
    ...state.mapReducer
  };
}

export default Form.create()(connect(mapStateToProps)(TypicalAdd));
